<template>
  <div class="page-container page-footer-btn">
      <van-row>
        <van-col span="24">
          <FortenScan
            propPlaceholder="请扫描标签拣货/取消拣货"
            propErrorMsg="请扫描正确的RFID/SN"
            :propTypeArr="['sn','rfid']"
            @scanCall="scanCall"
          />
        </van-col>
      </van-row>
      <br>
      <van-row>
        <van-cell
          >
          <template #title>
            <div style="font-size: 10px">
              <van-row>
                <van-col span="12">收货科室:{{dist.deptName}}</van-col>
              </van-row>
              <van-row>
                <van-col span="12">配送单号:{{dist.busKey}}</van-col>
                <van-col span="12">配送金额:{{dist.amount}}</van-col>
              </van-row>
              <van-row>
                <van-col span="15">拣货时间:{{dist.pickDate}}</van-col>
                <van-col span="9">拣货人:{{dist.picker}}</van-col>
              </van-row>
              <van-row>
                <van-col span="24">配送类型:{{formatBaseType(dist.distType)}}</van-col>
              </van-row>
              <van-row v-show="dist.distType != 'reagent'">
                <van-col span="24">科室地址:{{dist.addressName}}</van-col>
              </van-row>
              <van-row v-show="dist.distType == 'reagent'">
                <van-col span="24">试剂组名称:{{dist.reagentTeamName}}</van-col>
              </van-row>
              <van-row v-show="dist.distType == 'reagent'">
                <van-col span="24">试剂组地址:{{dist.reagentTeamAddress}}</van-col>
              </van-row>
            </div>
          </template>
        </van-cell>
      </van-row>
      <br>
      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
        拣货明细
      </van-divider>
      <van-row>
        <van-cell-group >
          <van-cell
            style="border-top:0.5px solid  #ccc;"
            v-for="(item, index) in items"
            :key="index"
            currency=""
          >
          <template #title>
            <van-row  :class="{'spd-success': item.pickedSkuQty >= item.skuQty, 'spd-warn': item.pickedSkuQty < item.skuQty}">
              <van-col span="24" >
                <van-row>
                  <van-col span="16 ">{{item.matrName}}</van-col>
                  <van-col span="8">{{item.recommendLot}}</van-col>
                </van-row>
                <van-row>
                  <van-col span="16" style="font-size: 10px" >{{item.matrSpec}}</van-col>
                  <van-col span="8"  style="font-size: 10px">{{item.locationNameDist ? item.locationNameDist : dist.warehouseName}}</van-col>
                </van-row>
                <van-row v-show="dist.distType == 'reagent'">
                  <van-col span="24">{{!item.flagStockReagent ? '非库存试剂' : '库存试剂'}}</van-col>
                </van-row>
                <van-row>
<!--                  <van-col span="8" style="height: 20px;text-align: center;margin-top: 15px;">-->
<!--                    <van-icon name="shopping-cart-o" color="#red" /><span style="font-size: 15px;margin-left: 3px;color: red">需求:{{item.packageQty}}{{item.packageUnit}}</span>-->
<!--                  </van-col>-->
                  <van-col span="12" style="height: 20px;text-align: center;margin-top: 15px;">
                    <van-icon name="shopping-cart-o" color="#red" /><span style="font-size: 15px;margin-left: 3px;color: red">开单:{{item.billPackageQty}}{{item.billPackageUnit}}</span>
                  </van-col>
                  <van-col span="12" style="height: 20px;text-align: center;margin-top: 15px;">
                    <van-icon name="goods-collect" color="#1989fa" /><span style="font-size: 15px;margin-left: 3px;color: #1989fa">已拣:{{item.pickMsg}}</span>
                  </van-col>
                </van-row>

                <van-row>
                  <van-col span="16">{{item.applyDate}}</van-col>
                  <van-col span="8">{{item.applyUser}}</van-col>
                </van-row>
              </van-col>
            </van-row>
          </template>
        </van-cell>
        </van-cell-group>
      </van-row>
      <van-row type="flex" justify="space-around" class="footer-btn">
        <van-col span="7">
          <van-button type="primary" @click="handleEndPick" block>
            拣货完成
          </van-button>
        </van-col>
        <van-col span="7">
          <van-button type="info" block @click="utilPrint.print('dist',distId )">
            打印标签
          </van-button>
        </van-col>
        <van-col span="7">
          <van-button type="danger" @click="handleCancelPick" block>
            拣货撤销
          </van-button>
        </van-col>
      </van-row>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import barcodeParse from '@/util/barcodeParse.js'
import commonMixin from '@/util/mixin/commonMixin'

export default {
  name: 'detail',
  data() {
    return {
      scan: '',
      dist: {},
      distId: null,
      items: []
    }
  },
  mixins: [commonMixin],
  computed: {
  },
  created() {
    this.distId = this.$route.params.id
    this.getDist()
  },
  methods: {
    //扫描
    scanCall(scan) {
      this.$ajax.post('/wm/dist/pick', {
        distId: this.dist.id,
        uniqueCode: scan,
        warehouseId: this.dist.warehouseId,
        isScan: 1
      }).then(resp => {
        if (resp.code == 0) {
          this.$notify.success(resp.msg)
          this.getData()
        }
      })
    },

    // 加载配送单
    getDist() {
      this.$ajax.get('/wm/dist/findByIdForPDA?id=' + this.distId).then(response => {
        if (response.code == 0) {
          this.dist = response.data
          this.getData()
        }
      })
    },

    // 加载配送明细
    getData() {
      let wrapper = this.$newWrapper().eq('dist_id', this.distId)
      this.$ajax.get('/wm/dist_item/findDistItemPda', {
        params: {
          queryString: JSON.stringify(wrapper.queryConditions)
        }
      }).then(response => {
        if (response.code == 0) {
          this.items = response.data
        }
      })
    },

    returnDist() {
      this.$router.push({path: '/dist/dist-pick'})
    },
    handleEndPick() {
      Dialog.confirm({
        title: '提示',
        message: '是否完成拣货',
      })
        .then(() => {
          this.$ajax.post(`/wm/dist_item/endPick?distId=${this.dist.id}`).then(resp => {
            if (resp.code == 0) {
              this.$notify.success(resp.msg)
              this.returnDist()
            }
          })
        })
        .catch(() => {
        })
    },
    handleCancelPick() {
      Dialog.confirm({
        title: '提示',
        message: '是否撤销拣货',
      })
        .then(() => {
          this.$ajax.post(`/wm/dist_item/cancelPick?distId=${this.dist.id}`).then(resp => {
            if (resp.code == 0) {
              this.$notify.success(resp.msg)
              this.returnDist()
            }
          })
        })
        .catch(() => {
        })
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
